<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS运动</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrapAll {
            padding: 10px;
        }

        .buttons button+button {
            margin-left: 10px;
        }

        .wrap {
            width: 1100px;
            height: 100px;
            border: 1px solid #333;
            margin-top: 10px;
            position: relative;
        }

        .sub {
            width: 100px;
            height: 100px;
            background-color: #6ff;
            position: absolute;
            /* left: 100px; */
        }
    </style>
</head>

<body>
    <div class="wrapAll">
        <div class="buttons">
            <!-- <button class="up">上</button> -->
            <button class="right">右</button>
            <button class="left">左</button>
            <!-- <button class="down">循环</button> -->
            <button class="pause">暂停</button>
        </div>
        <div class="wrap">
            <div class="sub"></div>
        </div>
    </div>
    <div class="wrapAll">
        <div class="buttons">
            <button class="right">右</button>
            <button class="left">左</button>
            <button class="pause">暂停</button>
        </div>
        <div class="wrap">
            <div class="sub"></div>
        </div>
    </div>
    <div class="wrapAll">
        <div class="buttons">
            <button class="right">右</button>
            <button class="left">左</button>
            <button class="pause">暂停</button>
        </div>
        <div class="wrap">
            <div class="sub"></div>
        </div>
    </div>

</body>
<script>
    var leftList = document.getElementsByClassName("left");
    var rightList = document.getElementsByClassName("right");
    var pauseList = document.getElementsByClassName("pause");
    var subList = document.getElementsByClassName("sub");
    var body = document.getElementsByTagName("body")[0];
    console.log(body);


    body.onclick = function(e) {
        
        var e = e || window.event;
        var target = e.target || e.srcElement;

        if(target.className == "right") {
            console.log(11);
            var list = [...rightList];
            var index = list.indexOf(target);
            animate(subList[index], "left", 1000, "slow");
        }

        else if(target.className == "left") {
            var list = [...leftList];
            var index = list.indexOf(target);
            animate(subList[index], "left", 0, "slow");
        }

        else if(target.className == "pause") {
            var list = [...pauseList];
            var index = list.indexOf(target);
            clearInterval(subList[index].timer);
        }
    }




    // 左运动
    // right.onclick = function () {
    //     animate(sub, "left", 0, "slow");
    // }

    // // 右运动
    // left.onclick = function () {
    //     animate(sub, "left", 1000, "fast");
    // }

    // // 暂停
    // pause.onclick = function () {
    //     clearInterval(ele.timer);
    // }

   



    //Js运动 传入元素，css样式，终点
    // aniType 运动方式  (normal fast slow)
    // fn      回调函数,在运动结束时执行
    function animate(ele, attr, end, aniType = "normal", fn) {
        //传统的获取非行内样式
        //cur 1. 记录盒子最开始的初始值  2. 记录每次运动时的当前位置
        var cur = parseFloat(getStyle(ele, attr));
        end = parseFloat(end);
        var speed = 0; //初始速度
        clearInterval(ele.timer);
        ele.timer = setInterval(function () {
            if (aniType == "normal") {
                // 匀速运动
                speed = end > cur ? 20 : -20;
            } else if (aniType == "fast") {
                // 加速运动
                speed = end > cur ? speed + 5 : speed - 5;
            } else if (aniType == "slow") {
                // 减速运动
                speed = (end - cur) / 10;
                speed = end > cur ? Math.ceil(speed) : Math.floor(speed);
            }
            cur += speed;
            ele.style[attr] = cur + "px";
            // console.log(cur, end, speed);
            if (Math.abs(end - cur) <= Math.abs(speed)) {
                clearInterval(ele.timer);
                ele.style[attr] = end + "px";

                if (fn) { //如果传入回调函数 => 在结束运动后执行
                    fn()
                }
            }
        }, 200);
    }

    //33.js获取非行内样式的兼容ie方法
    function getStyle(ele, attr) {
        if (window.getComputedStyle) {  //取值 判断方法是否存在   存在:常规浏览器
            return window.getComputedStyle(ele)[attr];
        } else {  //不存在 => IE
            return ele.currentStyle[attr];
        }
    }
</script>

</html>